<template>
	<div class="content_box">
		<div class="content_left">
			<div class="content_left_title public_card">项目名称1111</div>
			<div class="content_left_ul public_card">
				<div class="header">
					<img />
					<div class="header_title">
						<div>实例分割</div>
						<div>轴对齐边界框</div>
					</div>
				</div>
				<div class="split_box">
					<div class="split_title">模型训练</div>
					<div v-for="(item, index) in splitData" :key="index" class="split_item">
						<div class="split_item_title">
							<div>{{ item.title }}</div>
							<div class="split_item_actions">
								<img @click="handleCommentClick(index, $event)" src="../static/images/split/comment.png"
									class="comment-img">
								<img src="../static/images/split/more.png">
								<div v-if="showPopconfirm === index" class="custom-popconfirm">
									<div class="popconfirm-arrow"></div>
									<div class="popconfirm-content">
										<div class="popconfirm-content-title">拆分评论</div>
										<textarea class="popconfirm-content-txt" placeholder="请输入" />
										<div class="popconfirm-content-btn">
											<div @click="closePopconfirm" class="popconfirm-content-btn-cancel">取消</div>
											<div @click="closePopconfirm" class="popconfirm-content-btn-submit">确定</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="split_item_content">
							<div>compact（256*256）</div>
							<div>新模型</div>
							<div :class="[2, 3].includes(index) && 'noBtn'">开始评估</div>
							<div>未评估结果</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="content_right">
			<div class="content_right_setting">
				<div @click="isSettingShow = !isSettingShow" class="content_right_setting_header public_card">
					<div class="content_right_setting_header_left">
						<img src="../static/images/split/setting-filled@2x.png" />
						<div>设置</div>
					</div>
					<img v-if="isSettingShow" src="../static/images/split/down.png"
						class="content_right_setting_header_right" />
					<img v-else src="../static/images/split/up.png" class="content_right_setting_header_right" />
				</div>
				<transition name="expand">
					<div v-if="isSettingShow" class="content_right_setting_content">
						<div class="content_right_setting_content_item public_card">
							<div class="public_card_title">选择要评估的图像</div>
							<div v-for="(item, index) in selectAssessment" :key="index"
								class="content_right_setting_content_item_li">
								<div class="li_label">
									<el-checkbox v-model="checked1" size="large" />
									<div class="li_label_text">{{ item.name }}</div>
								</div>
								<div v-if="item.type == 'txt'" class="li_value">{{ item.value }}</div>
								<div v-else class="dialog_center_table_item">
									<div class="jian">
										<img src="../static/images/split/jian.png" />
									</div>
									<div class="num">{{ item.value }}</div>
									<div class="jia">
										<img src="../static/images/split/jia.png" />
									</div>
								</div>
							</div>
						</div>
						<div class="content_right_setting_content_item public_card">
							<div class="public_card_title">设备</div>
							<div class="select_form">
								<div class="label">设备：</div>
								<el-select placeholder="请选择" />
							</div>
							<div class="select_subhead">资源监控：</div>
							<div v-for="item in 4" :key="item" class="progress_item">
								<div class="progress_item_label">CPU</div>
								<div class="progress_item_value">
									<el-progress :stroke-width="8" :percentage="50"
										:color="['#1677FF', '#00ABA8'][item - 2]" />
								</div>
							</div>
						</div>
						<div class="content_right_setting_content_item public_card">
							<div class="public_card_title">高级推断参数</div>
							<div v-for="(item, index) in inferData" :key="index"
								class="content_right_setting_content_item_li">
								<div class="li_label">
									<div class="li_label_text" style="color: #303133;">{{ item.name }}</div>
								</div>
								<div class="dialog_center_table_item">
									<div class="jian">
										<img src="../static/images/split/jian.png" />
									</div>
									<div class="num">{{ item.value }}</div>
									<div class="jia">
										<img src="../static/images/split/jia.png" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</transition>
			</div>
			<div class="content_right_assess">
				<div @click="isAssessShow = !isAssessShow" class="content_right_setting_header public_card">
					<div class="content_right_setting_header_left">
						<img src="../static/images/split/setting-filled@2x.png" />
						<div>评估</div>
					</div>
					<img v-if="isAssessShow" src="../static/images/split/down.png"
						class="content_right_setting_header_right" />
					<img v-else src="../static/images/split/up.png" class="content_right_setting_header_right" />
				</div>
				<transition name="expand">
					<div v-if="isAssessShow" class="content_right_assess_content">
						<div class="content_right_assess_content_left">
							<div class="content_right_assess_content_left_top public_card">
								<div class="top_card_title">综合指标</div>
								<div class="top_card_subtitle">P1分数：-%</div>
								<div class="echarts_box">
									<div class="echarts_box_item">
										<div ref="pie"></div>
										<div>精确率：-%</div>
									</div>
									<div class="echarts_box_item">
										<div ref="pieTwo"></div>
										<div>召回率：-%</div>
									</div>
								</div>
								<div class="line"></div>
								<div class="form_box">
									<div class="form_box_label">平均AP：</div>
									<div class="form_box_value">0%</div>
								</div>
								<div class="form_box">
									<div class="form_box_label">标签图像的总数：</div>
									<div class="form_box_value">0%</div>
								</div>
							</div>
							<div class="content_right_assess_content_left_top public_card">
								<div class="form_box">
									<div class="form_box_label">各图像的推断时间：</div>
									<div class="form_box_value">00:00:04</div>
								</div>
								<div class="form_box">
									<div class="form_box_label">已用时间：</div>
									<div class="form_box_value">00:05:29</div>
								</div>
								<div class="form_box">
									<div class="form_box_label">额外值：</div>
									<div class="form_box_value"></div>
								</div>
							</div>
							<div style="padding-top: 0;" class="content_right_assess_content_left_top public_card">
								<div class="tab_top">
									<div class="active">检查图像</div>
									<div>混淆矩阵</div>
								</div>
								<div class="title">选择图像</div>
								<div v-for="(item, index) in selectImage" :key="index" class="form_box">
									<div class="form_box_label">{{ item.label }}：</div>
									<div class="form_box_value">{{ item.value }}</div>
								</div>
							</div>
							<div class="content_right_assess_content_left_top public_card">
								<div class="top_card_title">实例详情</div>
								<div class="class_list">
									<div v-for="(item, index) in instanceDetails" :key="index"
										:style="{ background: item.boxBg }" class="class_list_item">
										<div class="class_list_item_left">
											<div class="class_list_item_icon" :style="{ background: item.iconBg }">
											</div>
											<div class="class_list_item_title">{{ item.title }}</div>
											<div class="class_list_item_value">{{ item.value }}</div>
										</div>
										<div>{{ item.coordinate }}</div>
									</div>
								</div>
							</div>
						</div>
						<div class="content_right_assess_content_right public_card">
							<div class="public_card_title">图像</div>
							<div class="right_content_box">
								<div class="right_content_left">
									<canvas ref="canvasRef" class="right_content_left_img"></canvas>
									<div class="right_content_left_transparency">
										<div class="label">热力图透明度</div>
										<el-slider v-model="sliderValue" />
										<div class="slider_value">{{ sliderValue }}%</div>
									</div>
								</div>
								<div class="right_content_right_wrapper">
									<div class="right_content_right_shade top-shade"></div>
									<div class="right_content_right">
										<div v-for="(item, index) in imagsCanvs" :key="index"
											:class="['right_content_right_img', selectedImageIndex === index ? 'active_img' : '']"
											:style="getThumbnailStyle(index)" @click="handleImageSelect(index)">
											<canvas :ref="el => { thumbnailCanvasRefs[index] = el }"
												class="thumbnail-canvas"></canvas>
										</div>
									</div>
									<div class="right_content_right_shade bottom-shade"></div>
								</div>
							</div>
						</div>
					</div>
				</transition>
			</div>
		</div>
	</div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'

const isSettingShow = ref(true)
const isAssessShow = ref(true)
const checked1 = ref(false)
const pie = ref(null)
const pieTwo = ref(null)
const sliderValue = ref(50)

// Canvas相关
const canvasRef = ref(null)
const canvasContext = ref(null)
const selectedImageIndex = ref(0) // 当前选中的图像索引
const backgroundImage = ref(null) // 背景图像对象
const thumbnailCanvasRefs = ref([]) // 缩略图canvas引用

// popconfirm状态管理 (-1表示不显示，>=0表示显示对应索引的popconfirm)
const showPopconfirm = ref(-1)
// 存储弹出框位置信息
const popconfirmPosition = ref({ top: 0, left: 0 })

// 示例数据
const splitData = ref([
	{
		title: '拆分-250702-123321',
		percentage: '69·15·15%',
		images: '13个图像(100%)',
		instances: '4个实例(100%)',
	},
	{
		title: '拆分-250702-456789',
		percentage: '80·10·10%',
		images: '20个图像(100%)',
		instances: '8个实例(100%)',
	},
	{
		title: '拆分-250702-456789',
		percentage: '80·10·10%',
		images: '20个图像(100%)',
		instances: '8个实例(100%)',
	},
	{
		title: '拆分-250702-456789',
		percentage: '80·10·10%',
		images: '20个图像(100%)',
		instances: '8个实例(100%)',
	},
	{
		title: '拆分-250702-456789',
		percentage: '80·10·10%',
		images: '20个图像(100%)',
		instances: '8个实例(100%)',
	}
])

// 为每个实例创建假数据，包括背景图片和随机坐标点
const imagsCanvs = ref([
	{
		bgImage: '../static/images/split/canvsBg.png',
		coordinates: [
			{ x: 50, y: 50 },
			{ x: 250, y: 50 },
			{ x: 250, y: 200 },
			{ x: 50, y: 200 }
		],
		instanceIndex: 0 // 关联到instanceDetails的索引
	},
	{
		bgImage: '../static/images/split/canvsBg.png',
		coordinates: [
			{ x: 100, y: 80 },
			{ x: 100, y: 80 },
			{ x: 240, y: 190 },
			{ x: 60, y: 180 }
		],
		instanceIndex: 1
	},
	{
		bgImage: '../static/images/split/canvsBg.png',
		coordinates: [
			{ x: 10, y: 60 },
			{ x: 150, y: 50 },
			{ x: 250, y: 100 },
			{ x: 270, y: 200 },
			{ x: 100, y: 150 }
		],
		instanceIndex: 2
	},
	{
		bgImage: '../static/images/split/canvsBg.png',
		coordinates: [
			{ x: 80, y: 80 },
			{ x: 220, y: 80 },
			{ x: 220, y: 220 },
			{ x: 80, y: 220 }
		],
		instanceIndex: 3
	},
	{
		bgImage: '../static/images/split/canvsBg.png',
		coordinates: [
			{ x: 17, y: 52 },
			{ x: 220, y: 80 },
			{ x: 250, y: 100 },
			{ x: 220, y: 220 },
			{ x: 90, y: 220 }
		],
		instanceIndex: 3
	},
	{
		bgImage: '../static/images/split/canvsBg.png',
		coordinates: [
			{ x: 250, y: 100 },
			{ x: 80, y: 80 },
			{ x: 220, y: 80 },
			{ x: 250, y: 220 },
			{ x: 80, y: 220 }
		],
		instanceIndex: 3
	},
	{
		bgImage: '../static/images/split/canvsBg.png',
		coordinates: [
			{ x: 80, y: 80 },
			{ x: 220, y: 80 },
			{ x: 220, y: 220 },
			{ x: 80, y: 220 }
		],
		instanceIndex: 3
	}
])

const selectAssessment = ref([
	{
		name: '测试图像',
		value: 2,
		type: 'txt'
	},
	{
		name: '验证图像',
		value: 2,
		type: 'txt'
	},
	{
		name: '训练图像',
		value: 2,
		type: 'txt'
	},
	{
		name: '拆分外标注的图像',
		value: 2,
		type: 'txt'
	},
	{
		name: '未标注的图像',
		value: 2,
		type: 'txt'
	},
	{
		name: '限制图像数量',
		value: 25,
		type: 'change'
	},
])

const inferData = ref([
	{
		name: '最大检测数：',
		value: 25,
	},
	{
		name: '最大重叠度（%）：',
		value: 25,
	},
	{
		name: '类别不可知最大重叠度（%）：',
		value: 25,
	},
	{
		name: '最小置信度：',
		value: 25,
	},
	{
		name: 'IoU阔值（%）：',
		value: 25,
	},
	{
		name: '批次大小：',
		value: 25,
	},
])

const pieData = ref([
	{ value: 80, name: '训练集', color: '#2165F8' },
	{ value: 10, name: '验证集', color: '#FA8B14' },
])

const selectImage = ref([
	{
		label: '所有图像',
		value: 0,
	},
	{
		label: '已标注图像',
		value: 0,
	},
	{
		label: '仅争取预测',
		value: 0,
	},
	{
		label: '正确和错误预测',
		value: 0,
	},
	{
		label: '无正确预测',
		value: 0,
	},
	{
		label: '无匹配',
		value: 0,
	},
])

const instanceDetails = ref([
	{
		iconBg: 'rgba(249, 58, 74, 1)',
		boxBg: 'rgba(245,34,45,0.07)',
		title: '类别名称111',
		value: 0,
		coordinate: '((632,303),(766,441))'
	},
	{
		iconBg: 'rgba(255, 159, 24, 1)',
		boxBg: 'rgba(255, 159, 24, 0.07)',
		title: '类别名称222',
		value: 0,
		coordinate: '((632,303),(766,441))'
	},
	{
		iconBg: 'rgba(0, 181, 120, 1)',
		boxBg: 'rgba(0, 181, 120,0.07)',
		title: '类别名称333',
		value: 0,
		coordinate: '((632,303),(766,441))'
	},
	{
		iconBg: 'rgba(22, 119, 255, 1)',
		boxBg: 'rgba(22, 119, 255,0.07)',
		title: '类别名称444',
		value: 0,
		coordinate: '((632,303),(766,441))'
	},
])

// 监听滑块值变化，更新canvas
watch(sliderValue, () => {
	drawCanvas()
})

// 初始化thumbnailCanvasRefs数组
watch(() => imagsCanvs.value.length, (newLength) => {
	thumbnailCanvasRefs.value = Array(newLength).fill(null)
}, { immediate: true })

// 监听isAssessShow
watch(isAssessShow, () => {
	if (isAssessShow.value) {
		initAllCanvas()
	}
})

onMounted(() => {
	// 添加全局点击事件监听器
	document.addEventListener('click', handleClickOutside)

	// 添加滚动事件监听器，当列表滚动时关闭弹出框
	const splitBox = document.querySelector('.split_box')
	if (splitBox) {
		splitBox.addEventListener('scroll', closePopconfirm)
	}

	initAllCanvas()
})

onUnmounted(() => {
	// 清理全局点击事件监听器
	document.removeEventListener('click', handleClickOutside)

	// 清理滚动事件监听器
	const splitBox = document.querySelector('.split_box')
	if (splitBox) {
		splitBox.removeEventListener('scroll', closePopconfirm)
	}
})

const initAllCanvas = () => {

	// 初始化canvas和加载背景图片
	nextTick(() => {
		if (canvasRef.value) {
			const canvas = canvasRef.value
			// 设置canvas尺寸
			canvas.width = 300
			canvas.height = 288
			canvasContext.value = canvas.getContext('2d')

			// 加载背景图片
			backgroundImage.value = new Image()
			backgroundImage.value.src = '../static/images/split/canvsBg.png'
			backgroundImage.value.onload = () => {
				// 默认选中第一个实例
				if (imagsCanvs.value.length > 0) {
					selectedImageIndex.value = 0
					drawCanvas()
				}
			}
		}

		initAllPies()

		// 初始化所有缩略图的坐标点
		nextTick(() => {
			imagsCanvs.value.forEach((_, index) => {
				drawThumbnailPoints(index)
			})
		})
	})
}

// 初始化所有饼图
const initAllPies = () => {
	// 初始化右侧饼图
	if (pie.value) {
		initPie(pie.value, pieData.value)
	}
	if (pieTwo.value) {
		initPie(pieTwo.value, pieData.value)
	}
}

// 处理点击外部区域关闭popconfirm
const handleClickOutside = (event) => {
	const popconfirm = document.querySelector('.custom-popconfirm')
	const commentImgs = document.querySelectorAll('.comment-img')

	if (showPopconfirm.value >= 0 && popconfirm) {
		let clickedOnCommentImg = false
		commentImgs.forEach(img => {
			if (img.contains(event.target)) {
				clickedOnCommentImg = true
			}
		})

		if (!popconfirm.contains(event.target) && !clickedOnCommentImg) {
			closePopconfirm()
		}
	}
}

// 处理comment图片点击事件
const handleCommentClick = (index, event) => {
	// 切换弹出框显示状态
	showPopconfirm.value = showPopconfirm.value === index ? -1 : index

	// 如果是显示弹出框，则计算位置
	if (showPopconfirm.value === index) {
		// 获取点击位置
		const { clientX, clientY } = event
		// 获取页面滚动位置
		const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
		const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

		// 设置弹出框位置（相对于文档）
		popconfirmPosition.value = {
			top: clientY + scrollTop + 10, // 向下偏移10px
			left: clientX + scrollLeft + 10 // 向右偏移10px
		}
	}
}

// 关闭popconfirm
const closePopconfirm = () => {
	showPopconfirm.value = -1
}

// 处理图像选择
const handleImageSelect = (index) => {
	selectedImageIndex.value = index
	// 选择图像后重新绘制canvas
	drawCanvas()
}

// 为右侧缩略图添加背景图片样式
const getThumbnailStyle = (index) => {
	return {
		backgroundImage: `url(${imagsCanvs.value[index].bgImage})`,
		backgroundSize: 'cover',
		backgroundPosition: 'center'
	}
}

// 绘制Canvas
const drawCanvas = () => {
	if (!canvasRef.value || !canvasContext.value) return

	const ctx = canvasContext.value
	const canvas = canvasRef.value

	// 清除画布
	ctx.clearRect(0, 0, canvas.width, canvas.height)

	// 如果没有选中的实例或数据不存在，则不绘制
	if (selectedImageIndex.value < 0 || selectedImageIndex.value >= imagsCanvs.value.length) return

	const imageData = imagsCanvs.value[selectedImageIndex.value]

	// 绘制背景图片
	if (backgroundImage.value) {
		ctx.drawImage(backgroundImage.value, 0, 0, canvas.width, canvas.height)
	}

	const coordinates = imageData.coordinates
	if (coordinates.length < 3) return // 至少需要3个点才能形成一个面

	// 绘制填充面
	ctx.beginPath()
	ctx.moveTo(coordinates[0].x, coordinates[0].y)
	for (let i = 1; i < coordinates.length; i++) {
		ctx.lineTo(coordinates[i].x, coordinates[i].y)
	}
	ctx.closePath()

	// 使用滑块值设置透明度
	const opacity = sliderValue.value / 100
	ctx.fillStyle = `rgba(33, 101, 248, ${opacity})`
	ctx.fill()

	// 绘制连线
	ctx.beginPath()
	ctx.moveTo(coordinates[0].x, coordinates[0].y)
	for (let i = 1; i < coordinates.length; i++) {
		ctx.lineTo(coordinates[i].x, coordinates[i].y)
	}
	ctx.closePath()
	ctx.strokeStyle = 'rgba(33, 101, 248, 1)'
	ctx.lineWidth = 2
	ctx.stroke()

	// 绘制坐标点
	coordinates.forEach(point => {
		ctx.beginPath()
		ctx.arc(point.x, point.y, 4, 0, Math.PI * 2)
		ctx.fillStyle = 'white'
		ctx.fill()
		ctx.strokeStyle = 'rgba(33, 101, 248, 1)'
		ctx.lineWidth = 1
		ctx.stroke()
	})
}

// 绘制缩略图上的坐标点
const drawThumbnailPoints = (index) => {
	const canvas = thumbnailCanvasRefs.value[index]
	if (!canvas) return

	const ctx = canvas.getContext('2d')
	const imageData = imagsCanvs.value[index]
	const coordinates = imageData.coordinates

	// 设置canvas尺寸
	canvas.width = 64
	canvas.height = 64

	// 清除画布
	ctx.clearRect(0, 0, canvas.width, canvas.height)

	if (coordinates.length < 3) return

	// 计算缩放比例（假设原图为300x288，缩略图为64x64）
	const scaleX = 64 / 300
	const scaleY = 64 / 288

	// 绘制填充面和连线
	ctx.beginPath()
	ctx.moveTo(coordinates[0].x * scaleX, coordinates[0].y * scaleY)
	for (let i = 1; i < coordinates.length; i++) {
		ctx.lineTo(coordinates[i].x * scaleX, coordinates[i].y * scaleY)
	}
	ctx.closePath()

	// 填充颜色
	ctx.fillStyle = 'rgba(33, 101, 248, 0.5)'
	ctx.fill()

	// 绘制边框
	ctx.strokeStyle = 'rgba(33, 101, 248, 1)'
	ctx.lineWidth = 1
	ctx.stroke()

	// 绘制坐标点
	coordinates.forEach(point => {
		ctx.beginPath()
		ctx.arc(point.x * scaleX, point.y * scaleY, 2, 0, Math.PI * 2)
		ctx.fillStyle = 'white'
		ctx.fill()
		ctx.strokeStyle = 'rgba(33, 101, 248, 1)'
		ctx.lineWidth = 0.5
		ctx.stroke()
	})
}

// 初始化单个饼图
const initPie = (element, data) => {
	// 如果已经存在图表实例，先销毁
	if (element._chartInstance) {
		element._chartInstance.dispose()
	}

	const myChart = echarts.init(element)
	// 将图表实例保存到DOM元素上，便于后续清理
	element._chartInstance = myChart

	const option = {
		series: [
			{
				type: 'pie',
				radius: ['48%', '100%'], // 环形饼图
				center: ['50%', '50%'],
				data: data.map(item => ({
					value: item.value,
					name: item.name,
					itemStyle: {
						color: item.color
					}
				})),
				label: {
					show: false // 隐藏标签
				},
				labelLine: {
					show: false // 隐藏标签线
				},
				emphasis: {
					scale: false // 禁用鼠标悬停放大效果
				}
			}
		]
	}

	myChart.setOption(option)

	// 响应式调整
	const resizeHandler = () => {
		myChart.resize()
	}
	window.addEventListener('resize', resizeHandler)

	// 保存resize处理器，便于清理
	element._resizeHandler = resizeHandler
}
</script>

<style scoped lang="scss">
.content_box {
	height: calc(100% - 7px);
	padding: 7px 15px 0 15px;
	display: flex;

	.content_left {
		flex-shrink: 0;
		width: 235px;
		display: flex;
		flex-direction: column;
		margin-right: 11px;

		.content_left_title {
			padding: 0 15px;
			line-height: 50px;
			margin-bottom: 10px;
			font-size: 14px;
		}

		.content_left_ul {
			flex: 1;

			.header {
				display: flex;
				align-items: center;
				padding: 14px 15px;
				border-bottom: 1px solid rgba(117, 138, 179, 0.2);

				img {
					margin-right: 10px;
					width: 38px;
					height: 35px;
					border-radius: 50%;
				}

				.header_title {
					div:nth-child(1) {
						font-weight: 400;
						font-size: 14px;
						color: #333333;
						line-height: 21px;
						margin-bottom: 4px;
					}

					div:nth-child(2) {
						font-weight: 400;
						font-size: 12px;
						color: #606266;
						line-height: 18px;
					}
				}
			}

			.split_box {
				padding: 0 15px 14px 15px;
				height: calc(100vh - 270px);
				overflow-y: auto;

				// 自定义滚动条样式
				&::-webkit-scrollbar {
					width: 6px;
				}

				&::-webkit-scrollbar-track {
					background: rgba(0, 0, 0, 0.1);
					border-radius: 3px;
				}

				&::-webkit-scrollbar-thumb {
					background: rgba(0, 0, 0, 0.3);
					border-radius: 3px;

					&:hover {
						background: rgba(0, 0, 0, 0.5);
					}
				}

				.split_title {
					font-weight: 400;
					font-size: 14px;
					color: #222222;
					line-height: 20px;
				}

				.split_item {
					margin-top: 14px;
					background: rgba(255, 255, 255, 0.79);
					border-radius: 8px;
					border: 1px solid #DCE5E6;
					padding: 14px 10px 16px 14px;

					.split_item_title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 12px;

						div:nth-child(1) {
							font-weight: 400;
							font-size: 12px;
							color: #333333;
							line-height: 12px;
						}

						.split_item_actions {
							position: relative;
							display: flex;
							align-items: center;

							.comment-img {
								cursor: pointer;
								width: 12px;
								height: 12px;
								margin-right: 16px;
							}

							img:nth-child(2) {
								cursor: pointer;
								width: 12px;
								height: 3px;
							}

							.custom-popconfirm {
								position: fixed; // 改为fixed定位，相对于视口
								top: v-bind('popconfirmPosition.top + "px"'); // 使用动态计算的位置
								left: v-bind('popconfirmPosition.left + "px"'); // 使用动态计算的位置
								background: rgba(0, 0, 0, 0.75);
								border-radius: 6px;
								z-index: 1000;

								.popconfirm-arrow {
									position: absolute;
									left: -6px; // 在popconfirm左侧
									top: 10px; // 距离上边10px
									width: 0;
									height: 0;
									border-top: 6px solid transparent;
									border-bottom: 6px solid transparent;
									border-right: 6px solid rgba(0, 0, 0, 0.75); // 向左指向的三角箭头
								}

								.popconfirm-content {
									padding: 10px 21px 13px 19px;

									.popconfirm-content-title {
										font-weight: 400;
										font-size: 14px;
										color: #FFFFFF;
										line-height: 22px;
										margin-bottom: 8px;
									}

									.popconfirm-content-txt {
										width: 304px;
										height: 80px;
										padding: 8px 12px;
										background: #FFFFFF;
										border-radius: 6px;
										border: 1px solid rgba(255, 255, 255, 0.2);
										font-weight: 400;
										font-size: 14px;
									}

									.popconfirm-content-btn {
										display: flex;
										align-items: center;
										justify-content: end;
										gap: 15px;
										font-weight: 400;
										font-size: 14px;
										margin-top: 15px;

										&-cancel {
											background: #FFFFFF;
											border-radius: 4px;
											border: 1px solid rgba(0, 0, 0, 0.15);
											color: rgba(0, 0, 0, 0.88);
											line-height: 24px;
											padding: 0 8px;
											cursor: pointer;
										}

										&-submit {
											background: #1677FF;
											border-radius: 4px;
											border: 1px solid #1677FF;
											color: #FFFFFF;
											line-height: 24px;
											padding: 0 8px;
											cursor: pointer;
										}
									}
								}
							}
						}
					}

					.split_item_content {
						font-weight: 400;
						font-size: 12px;
						color: #606266;
						line-height: 12px;

						.noBtn {
							background: rgba(0, 0, 0, 0.04);
							border: 1px solid rgba(0, 0, 0, 0.15) !important;
							color: rgba(0, 0, 0, 0.25) !important;
							cursor: default !important;
						}

						div:nth-child(1) {
							margin-bottom: 18px;
						}

						div:nth-child(2) {
							margin-bottom: 10px;
						}

						div:nth-child(3) {
							width: 90px;
							line-height: 30px;
							text-align: center;
							border-radius: 16px;
							border: 1px solid #2165F8;
							font-weight: 500;
							font-size: 12px;
							color: #2165F8;
							margin-bottom: 14px;
							cursor: pointer;
						}

						div:nth-child(4) {
							margin-bottom: 10px;
						}
					}
				}
			}
		}
	}

	.content_right {
		flex: 1;

		.content_right_setting_header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px;
			cursor: pointer;

			.content_right_setting_header_left {
				display: flex;
				align-items: center;
				gap: 9px;
				font-weight: 500;
				font-size: 13px;
				color: #303133;

				img {
					width: 13px;
					height: 14px;
					flex-shrink: 0;
				}
			}

			.content_right_setting_header_right {
				width: 12px;
				height: 8px;
			}
		}

		.content_right_setting {

			/* 展开收起动画相关样式 */
			.expand-enter-active,
			.expand-leave-active {
				transition: all 0.3s ease;
				max-height: 1000px;
				/* 设置一个足够大的值，确保能容纳内容 */
				overflow: hidden;
				opacity: 1;
			}

			.expand-enter-from,
			.expand-leave-to {
				max-height: 0;
				opacity: 0;
				overflow: hidden;
			}

			.content_right_setting_content {
				margin-top: 10px;
				display: flex;
				gap: 10px;

				.content_right_setting_content_item {
					padding: 13px 11px 20px 10px;
					flex: 1;

					.select_form {
						display: flex;
						align-items: center;
						margin-top: 10px;

						.label {
							font-weight: 400;
							font-size: 12px;
							color: #303133;
							line-height: 12px;
							margin-right: 2px;
							flex-shrink: 0;
						}

						::v-deep .el-select--large {
							border-radius: 8px;
							border: 1px solid #BFBFBF;
							color: #8C8C8C;
							overflow: hidden;

							.el-select__wrapper {
								padding: 8px 10px;
								line-height: unset;
								min-height: unset;
								box-shadow: unset;

							}

							.el-select__input-wrapper {
								input {
									line-height: 10px;
									height: unset;
								}
							}

							.el-select__placeholder {
								line-height: 18px;

								span {
									font-weight: 400;
									font-size: 12px;
								}
							}
						}
					}

					.select_subhead {
						margin-top: 15px;
						font-weight: 400;
						font-size: 12px;
						color: #303133;
						line-height: 12px;
					}

					.progress_item {
						display: flex;
						align-items: center;
						margin-top: 9px;

						.progress_item_label {
							font-weight: 400;
							font-size: 12px;
							color: #606266;
							line-height: 12px;
							margin-right: 19px;
							flex-shrink: 0;
						}

						.progress_item_value {
							flex: 1;

							::v-deep .el-progress__text {
								margin-left: 14px;
								font-weight: 400;
								font-size: 12px !important;
								color: #606266;
								line-height: 12px;
							}
						}
					}
				}

				.content_right_setting_content_item_li {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 14px;

					.li_label {
						display: flex;
						align-items: center;
						gap: 6px;

						::v-deep .el-checkbox--large {
							height: unset;
						}

						.li_label_text {
							font-weight: 400;
							font-size: 12px;
							color: #606266;
						}
					}

					.li_value {
						font-weight: 400;
						font-size: 12px;
						color: #606266;
						line-height: 12px;
					}
				}
			}
		}

		.content_right_assess {
			margin-top: 10px;

			/* 展开收起动画相关样式 */
			.expand-enter-active,
			.expand-leave-active {
				transition: all 0.3s ease;
				max-height: 1000px;
				/* 设置一个足够大的值，确保能容纳内容 */
				overflow: hidden;
				opacity: 1;
			}

			.expand-enter-from,
			.expand-leave-to {
				max-height: 0;
				opacity: 0;
				overflow: hidden;
			}

			.content_right_assess_content {
				margin-top: 10px;
				display: flex;
				gap: 10px;

				.content_right_assess_content_left {
					display: grid;
					gap: 10px;
					grid-template-columns: repeat(2, 235px);

					.content_right_assess_content_left_top {
						padding-top: 12px;

						.top_card_title {
							font-weight: 500;
							font-size: 14px;
							color: #303133;
							line-height: 14px;
							margin-left: 10px;
						}

						.top_card_subtitle {
							font-weight: 400;
							font-size: 12px;
							color: #303133;
							line-height: 12px;
							text-align: center;
							margin-top: 10px;
						}

						.echarts_box {
							display: flex;
							align-items: center;
							padding: 10px 20px;
							justify-content: space-between;

							.echarts_box_item {
								display: flex;
								flex-direction: column;
								align-items: center;
								gap: 6px;

								div:first-child {
									width: 60px;
									height: 60px;
								}

								div:last-child {
									font-weight: 400;
									font-size: 12px;
									color: #303133;
									line-height: 12px;
								}
							}

						}

						.line {
							border: 1px solid rgba(117, 138, 179, 0.2);
						}

						.form_box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-left: 10px;
							padding-right: 16px;

							.form_box_label {
								font-weight: 400;
								font-size: 12px;
								color: #606266;
								line-height: 24px;
							}

							.form_box_value {
								font-weight: 500;
								font-size: 12px;
								color: #333333;
								line-height: 24px;
							}
						}

						.tab_top {
							display: flex;
							background: rgba(0, 0, 0, 0.02);
							border-radius: 7px 7px 0px 0px;
							border: 1px solid #D9D9D9;
							font-weight: 400;
							font-size: 12px;
							color: rgba(0, 0, 0, 0.88);
							overflow: hidden;

							div {
								flex: 1;
								text-align: center;
								line-height: 30px;
								cursor: pointer;
							}

							div:hover {
								background: #FFFFFF;
								color: #2165F8;
								font-weight: 600;
							}

							.active {
								background: #FFFFFF;
								color: #2165F8;
								font-weight: 600;
							}

							div:first-child {
								border-right: 1px solid #D9D9D9;
							}
						}

						.title {
							font-weight: 400;
							font-size: 12px;
							color: #303133;
							line-height: 12px;
							margin-top: 10px;
							margin-left: 10px;
							margin-bottom: 10px;
						}

						.class_list {
							height: 100%;
							overflow-y: auto;

							.class_list_item {
								display: flex;
								align-items: center;
								justify-content: space-between;
								padding: 7px 9px;
								border-radius: 6px;
								font-weight: 400;
								font-size: 10px;
								color: #303133;
								margin-top: 6px;
								margin-left: 6px;
								margin-right: 5px;

								.class_list_item_left {
									display: flex;
									align-items: center;

									.class_list_item_icon {
										width: 16px;
										height: 16px;
									}

									.class_list_item_title {
										margin-left: 6px;
										margin-right: 10px;
										line-height: 10px;
									}

									.class_list_item_value {
										line-height: 10px;
										margin-right: 16px;
									}
								}

							}
						}
					}
				}

				.content_right_assess_content_right {
					flex: 1;
					padding-top: 12px;
					padding-left: 10px;

					.right_content_box {
						display: flex;
						justify-content: space-between;
						padding-left: 5px;

						.right_content_left {
							flex: 1;
							display: flex;
							flex-direction: column;
							align-items: center;
							flex-shrink: 0;

							.right_content_left_img {
								width: 300px;
								height: 288px;
								margin-bottom: 43px;
								margin-top: 20px;
							}

							.right_content_left_transparency {
								display: flex;
								align-items: center;

								.label {
									flex-shrink: 0;
									font-weight: 400;
									font-size: 12px;
									color: #303133;
									line-height: 12px;
									margin-right: 20px;
								}

								::v-deep .el-slider--large {
									width: 197px;
								}

								.slider_value {
									font-weight: 400;
									font-size: 12px;
									color: rgba(0, 0, 0, 0.45);
									line-height: 19px;
									margin-left: 10px;
								}
							}
						}

						.right_content_right_wrapper {
							flex-shrink: 0;
							position: relative;
							height: 381px;
							width: 76px;

							.right_content_right_shade {
								position: absolute;
								left: 0;
								width: 76px;
								height: 119px;
								pointer-events: none;
								z-index: 1;
							}

							.top-shade {
								top: 0;
								background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
							}

							.bottom-shade {
								bottom: 0;
								background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
							}

							.right_content_right {
								-ms-overflow-style: none;
								scrollbar-width: none;

								&::-webkit-scrollbar {
									display: none;
								}

								position: absolute;
								top: 0;
								left: 0;
								height: 100%;
								width: 100%;
								overflow-y: auto;

								.right_content_right_img {
									position: relative;
									margin-top: 10px;
									width: 64px;
									height: 64px;
									border-radius: 10px;
									border: 2px solid rgba(0, 0, 0, 0.1);
									cursor: pointer;
								}

								.active_img {
									border-radius: 10px;
									border: 2px solid #2165F8;
								}

								.thumbnail-canvas {
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									pointer-events: none;
								}
							}
						}
					}
				}
			}
		}
	}


	.dialog_center_table_item {
		display: flex;
		align-items: center;
		border-radius: 2px 0px 0px 2px;

		.jian {
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #BFBFBF;
			border-right: unset;
			cursor: pointer;
			border-radius: 2px 0px 0px 2px;

			img {
				width: 8px;
				height: 1px;
			}
		}

		.num {
			text-align: center;
			border: 1px solid #BFBFBF;
			width: 30px;
			line-height: 18px;
			font-weight: 400;
			font-size: 10px;
			color: #333333;
		}

		.jia {
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #BFBFBF;
			border-left: unset;
			cursor: pointer;
			border-radius: 0px 2px 2px 0px;

			img {
				width: 8px;
				height: 8px;
			}
		}
	}
}
</style>
